<template>
  <el-dialog
    :visible.sync="dialogVisible"
    title="选择分组"
    append-to-body
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    :before-close="beforeClose"
    class="tag-edit-dialog kpi-operation-dialog"
    width="30%"
    v-dialogMove
  >
    <el-form :model="editForm" label-width="0px" :rules="editFormRules" ref="editForm">
      <el-form-item prop="groupId">
        <el-select v-model="editForm.groupId" filterable clearable>
          <el-option v-for="item in groups" :key="item.groupId" :label="item.groupNm" :value="item.groupId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="tagNm" v-if="editForm.type === 'copy'">
        <el-input v-model="editForm.tagNm" placeholder="新指标名称"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="beforeClose">取消</el-button>
      <el-button type="primary" @click="submit">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      editForm: {
        type: '',
        tagId: '',
        tagNm: '',
        groupId: ''
      },
      editFormRules: {
        groupId: [{ required: true, message: '分组不能为空', trigger: 'change' }],
        tagNm: [{ required: true, message: '新指标名称不能为空', trigger: 'blur' }]
      },
      groups: [],
      dialogVisible: false
    }
  },
  methods: {
    showDialog(params) {
      this.editForm.tagId = params.tagId
      this.editForm.type = params.type
      this.getGroup()
      this.dialogVisible = true
    },
    getGroup() {
      this.$ajax({
        url: this.$ajax.setUrl('ast/astTagDerivedGroup/getAllGroup/5'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.groups = [{ groupId: '0', groupNm: '默认分组' }, ...data.data]
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    submit() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          let ajaxParams = {
            url: this.$ajax.setUrl(
              this.editForm.type === 'copy'
                ? 'IndexAllocation/copyReleaseTag'
                : 'IndexAllocation/transferDerivedIndexGroup'
            ),
            method: 'post'
          }
          let params = {
            tagId: this.editForm.tagId,
            groupId: this.editForm.groupId
          }
          if (this.editForm.type === 'copy') {
            params.tagNm = this.editForm.tagNm
            ajaxParams.data = this.$ajax.setData(params)
          } else {
            ajaxParams.params = this.$ajax.setParams(params)
          }
          this.$ajax(ajaxParams).then(({ data }) => {
            if (data && data.code === '0') {
              this.$message.success(data.msg)
              this.$emit('callback')
              this.beforeClose()
            } else {
              this.$message.error(data.data || data.msg)
            }
          })
        }
      })
    },
    beforeClose() {
      this.editForm.tagId = ''
      this.editForm.tagNm = ''
      this.editForm.type = ''
      this.editForm.groupId = ''
      this.groups = []
      this.$nextTick(() => {
        this.$refs.editForm.clearValidate()
        this.dialogVisible = false
      })
    }
  }
}
</script>

<style lang="scss"></style>
